<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>发现</title>
    <!-- <link rel="stylesheet" href="./css/style.css"> -->
    <!-- <link rel="stylesheet" href="./css/find.css"> -->
    <link rel="stylesheet" href="https://ttresource.oss-cn-beijing.aliyuncs.com/handupload/video.css">
    <link rel="stylesheet" href="https://cdn.bootcss.com/Swiper/4.2.0/css/swiper.min.css">
    <style>
        body,
        h1,
        h2,
        h3,
        h4,
        h5,
        h6,
        hr,
        p,
        blockquote,
        dl,
        dt,
        dd,
        ul,
        ol,
        li,
        pre,
        form,
        fieldset,
        legend,
        button,
        input,
        textarea,
        th,
        td {
            margin: 0;
            padding: 0;
        }

        body,
        button,
        input,
        select,
        textarea {
            font: 12px/1.5tahoma, arial, \5b8b\4f53;
        }

        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            font-size: 100%;
        }

        address,
        cite,
        dfn,
        em,
        var {
            font-style: normal;
        }

        code,
        kbd,
        pre,
        samp {
            font-family: couriernew, courier, monospace;
        }

        small {
            font-size: 12px;
        }

        ul,
        ol {
            list-style: none;
        }

        a {
            text-decoration: none;
        }

        a:hover {
            text-decoration: underline;
        }

        sup {
            vertical-align: text-top;
        }

        sub {
            vertical-align: text-bottom;
        }

        legend {
            color: #000;
        }

        fieldset,
        img {
            border: 0;
        }

        button,
        input,
        select,
        textarea {
            font-size: 100%;
        }

        table {
            border-collapse: collapse;
            border-spacing: 0;
        }

        .line {
            width: 100%;
            height: 10px;
            background: #f3f3f3;
        }

        .bor_no {
            border: none!important;
        }

        .red_color {
            color: #FF4954!important;
        }

        .dind1{
            width: 100%;
            overflow: hidden;
            background: #F2F2F2;
        }
        .dind2{
            width: 100%;
            overflow: hidden;
            background: #F2F2F2;
        }
        .find_user_info {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 18px 18px 5px 18px;
        }

        .find_user_flex {
            display: flex;
            align-items: center;
            font-size: 14px;
            color: #2A2A2A;
            font-weight: 500;
        }

        .user_info_head {
            width: 28px;
            height: 28px;
            border-radius: 100%;
            overflow: hidden;
            margin-right: 7px;
        }

        .user_info_head img {
            width: 100%;
            height: 100%;
        }

        .find_user_time {
            font-size: 12px;
            color: #B5B5B5;
            font-weight: 400;
        }

        .find_desc {
            padding: 0 18px 10px 51px;
            font-size: 14px;
            color: #6F757C;
            font-weight: 400;
        }

        .find_user_selfie {
            padding: 0px 18px 18px 0;
            margin-left: 51px;
            border-bottom: 1px solid #DFDFDF;
            display: flex;
            flex-wrap: wrap;
        }

        .find_user_selfie_img {
            width: 80px;
            height: 80px;
            margin-right: 6px;
            margin-bottom: 6px;
        }

        .find_user_selfie_img img {
            width: 100%;
            height: 100%;
            display: block;
        }

        .videoBgs {
            padding: 18px;
            width: 100%;
            height: 200px;
            box-sizing: border-box;
            /* overflow: hidden; */
        }

        .find_chazhuang_img {
            width: 100%;
            height: auto;
        }

        .find_chazhuang_img img {
            width: 100%;
            height: 100%;
            display: block;
        }

        .find_chazhuang {
            box-sizing: border-box;
            overflow: hidden;
            margin-top: 40px;
        }

        .swiper_box {
            width: 190px;
            margin-top: 20px;
            margin-bottom: -20px;
            overflow-x: scroll;
        }

        .swiper {
            width: 10000px;
            display: flex;
            overflow-x: scroll;
        }
    .swiper-wrapper{
        margin-left: 18px;
    }
        .swiper_item {
            width: 300px;
            height: 118px;
            background: #ccc;
            margin-right: 20px;
            overflow-x: scroll;
        }

        .swiper-container {
            margin-top: 20px!important;
            width: 100%;
            height: 118px;
            margin-bottom: -20px!important;
        }

        .swiper-slide {
            /* text-align: center; */
            font-size: 18px;
            background: #fff;
            min-width: 300px;
            width: auto!important;
            font-size: 10px;
            color: #6F757C;
            font-weight: 400;
            border-radius: 3px;
            margin-right: 12px!important;
        }

        .swiper-slide>div {
            height: 28px;
            border-bottom: 1px solid #DFDFDF;
            display: flex;
            align-items: center;
            margin: 0 18px;
        }

        .swiper-slide>div:last-child {
            border: none;
        }

        .swiper-slide>div>div:nth-child(1) {
            /* width: 50%; */
        }

        .swiper-slide>div>div:nth-child(2) {
            /* width: 50%; */
            padding-left: 30px;
        }

        .find_swiper_flex {
            display: flex;
            align-items: center;
        }

        .find_nav_box {
            height: 50px;
            width: 100%;
            display: flex;
            align-items: center;
            font-size: 12px;
            color: #C3C3C3;
            font-weight: 500;
            border-bottom: 1px solid #eee;
        }

        .find_total {
            width: 32%;
            padding-left: 18px;
        }

        .find_nav {
            width: 100%;
            display: flex;
            justify-content: space-around;
        }

       .find_nav div{
            /* width: 24%; */
            position: relative;
        }
        .find_nav_active{
            color: #2A2A2A;
        }
        .find_nav_active:after{
            content: "";
            position: absolute;
            border-bottom: 2px solid #2A2A2A;
            bottom: -16px;
            left: 0;
            width: 100%;
        }
        .mask{
            width: 100%;
            height: 100%;
            position: fixed;
            left: 0;
            top: 0;
            background: rgba(0,0,0,.2);
            z-index: 99;
            display: none;
        }
        .msg_box{
            width: 80%;
            min-height: 130px;
            position: absolute;
            left: 50%;
            top: 40%;
            margin-left: -40%;
            z-index: 999;
            background: #fff;
            border-radius: 10px;
            text-align: center;
        }
        .title{
             height: 40px;
             line-height: 40px;
        }
        .content{
            padding: 0 18px 50px 18px;
        }
        .okbtn{
            color: #007bfe;
            height: 40px;
            position: absolute;
            bottom: 0;
            width: 100%;
            line-height: 40px;
            font-weight: bold;
            border-top: 1px solid #eee;
        }
    .no_people{
        padding-left: 18px;
    }
    .videoBgsOne{
        margin-bottom: 18px;
    }
    </style>
</head>

<body>
    <div class="find">
        <!-- <div class="find_nav_box">
            <div class="find_total">交易(2,450)</div>
            <div class="find_nav">
                <div class="find_nav_active">简介</div>
                <div>茶庄</div>
                <div>用户评论</div>
            </div>
        </div> -->
        <div class="mask">
            <div class="msg_box">
                <div class="title">提示</div>
                <div class="content"></div>
                <div class="okbtn">确认</div>
            </div>
        </div>
        <div class="find_tab_box">
            <div class="dind1 finds" style="display: none">
                <div class="videoBgs videoBgsOne">
                    <video id="my-video1" class="video-js videoBgs videoBgs1" controls preload="auto" poster="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSMkZ8908OI26Xnnsei6xpcJdMMR15Ozd7e_IBXNYzbp860vjdg"
                        data-setup="{}">
                        <p class="vjs-no-js">
                            To view this video please enable JavaScript, and consider upgrading to a web browser that
                            <a href="https://videojs.com/html5-video-support/" target="_self">supports HTML5 video</a>
                        </p>
                    </video>
                </div>
                <div style="width: 100%; height: 3px"></div>
            </div>
            <div class="dind2 finds" style="display: none">
                <div class="videoBgs videoBgsTwo">
                    <video id="my-video2" class="video-js videoBgs videoBgs2" controls preload="auto" poster="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSMkZ8908OI26Xnnsei6xpcJdMMR15Ozd7e_IBXNYzbp860vjdg"
                        data-setup="{}">{/*./images/vdbg.png*/}
                        <p className="vjs-no-js">
                            To view this video please enable JavaScript, and consider upgrading to a web browser that
                            <a href="https://videojs.com/html5-video-support/" target="_self">supports HTML5 video</a>
                        </p>
                    </video>
                </div>
            </div>
            <div class="dind3 finds" style="display: none"><div class="no_people">暂无评论</div>
            </div>
        </div>
    </div>
 
</body>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://vjs.zencdn.net/6.6.3/video.js"></script>
<script src="https://cdn.bootcss.com/Swiper/4.2.0/js/swiper.min.js"></script>
<script>
    // $('.find_nav div').click(function () {
    //     var i = $(this).index();//下标第一种写法
    //     $(this).addClass('find_nav_active').siblings().removeClass('find_nav_active');
    //     $('.find_tab_box .finds').eq(i).show().siblings().hide();
    // });
     $(".okbtn").click(function() {
        $(".mask").hide()
    })
    $.getUrlParam = function (name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) return unescape(r[2]); return null;
    }
    var token = $.getUrlParam('token');
    var id = $.getUrlParam('id');
    var host = $.getUrlParam('host');
    var protocol = $.getUrlParam('protocol');
    var tab = $.getUrlParam('tab');

    if(tab == "intro") {
        $(".dind1").show().siblings().hide();
    }else if(tab == "store") {
        $(".dind2").show().siblings().hide();
    }else if(tab == "comment") {
        $(".dind3").show().siblings().hide();
    }
    var videoData1 = null;
    var videoData2 = null;
    // 评论str
    var render_pinlun = function (list) {
        var part = '<div>' +
            '<div class="find_user_info">' +
            '<div class="find_user_flex">' +
            '<div class="user_info_head">' +
            '<img src=' + list.user_avatar + ' alt="">' +
            '</div>' +
            ' <div>' + list.nickname + '</div>' +
            '</div>' +
            '<div class="find_user_time">' + list.add_time + '</div>' +
            '</div>' +
            '<div class="find_desc">' + list.content +
            '</div>' +
            '<div class="find_user_selfie">';
        list.pictures.forEach(function (i, v) {
            part += '<div class="find_user_selfie_img">' +
                '<img src=' + i.img_url + ' alt="">' +
                '</div>';
        });
        part += '</div>' +
            '</div>';
        return part;
    }
    // 详情str
    var renderDetails1 = function (data) {
        var part =
            '<div class="swiper-container">' +
            '<div class="swiper-wrapper">' +
            '<div class="swiper-slide">' +
            '<div>' +
            '<div>种类: ' + data.kind + '11111</div>' +
            '<div>年份: ' + data.age + '</div>' +
            '</div>' +
            '<div>' +
            '<div>规格: ' + data.specification + '</div>' +
            '<div>发行量: ' + data.publish_count + '</div>' +
            '</div>' +
            '<div>原料: ' + data.material + '</div>' +
            '<div>仓储库房: ' + data.repo + '</div>' +
            '</div>' +
            '<div class="swiper-slide">' +
            '<div>' +
            '<div>工艺: ' + data.technology + '</div>' +
            '<div>茶山: ' + data.tea_mountain + '</div>' +
            '</div>' +
            '<div>' +
            '<div>海拔: ' + data.altitude + '</div>' +
            '<div>年平均气温: ' + data.year_avg_temperature + '</div>' +
            '</div>' +
            '<div>' +
            '<div>古树量: ' + data.ancient_tea_tree_count + '</div>' +
            '<div>年平均降水: ' + data.year_avg_precipitation + '</div>' +
            '</div>' +
            '<div>产地: 云南省普洱市</div>' +
            '</div>' +
            '</div>' +
            '</div>' +
            '<div class="find_chazhuang">';
        data.long_images.map(function (i, v) {
            part += '<div class="find_chazhuang_img">' +
                '<img src=' + i.img_url + ' alt="">' +
                '</div>'
        })
        part += '</div>';
        return part;
    }
    // 详情video str
    var render_video = function (data) {
        return '<source src=' + data.video_banner + ' type="video/mp4" />'
    }

    // 产品详情 str
    var renderDetails2 = function (data) {
        var part =
            '<div class="find_chazhuang">' + $.map(data.long_images, function (i, v) {
                return (
                    '<div class="find_chazhuang_img">' +
                    '<img src=' + i.img_url + ' alt="">' +
                    '</div>'
                )
            })
        '</div>';
        return part;
    }
    // 产品video str
    var render_video2 = function (data) {
        return '<source src=' + data.video_banner + ' type="video/mp4" />'
    }



    // var datas, dataDetails, data_pinpai;
    
    // 获取评论列表
    $.ajax({
        type: "GET",
        url: protocol + '://' + host +'/product/products/' + id + "/comments?offset=0&limit=20",
        dataType: 'json',
        success: function (data) {
            var datas = data && data;
            if(!data.code) {
                 for (var i = 0; i < data.items.length; i++) {
                    $(".dind3").append(render_pinlun(datas.items[i]));
                }
                console.log(datas)
           if(datas.items.length > 0) {
            $(".no_people").hide()
           }else{
           $(".no_people").show()
           }

            }else{
                $(".mask").show();
                $(".content").html(data.msg)
            }
        },
        error: function(error) {
            $(".mask").show();
            $(".content").html("加载失败")
            console.log(error)
        }
    });
    // 获取详情
    $.ajax({
        type: "GET",
        url: protocol + '://' + host +"/product/products/" + id,
        dataType: 'json',
        async: false,
        success: function (data) {
            videoData1 = data;
            if(!data.code) {
                $(".dind1").append(renderDetails1(data));
                if(data.video_banner != "") {
                    $(".videoBgs1").append(render_video(data))
                }else{
                    $(".videoBgsOne").hide();
                }
                console.log(data)
                var swiper = new Swiper('.swiper-container', {
                    slidesPerView: 'auto',
                    spaceBetween: 30,
                    pagination: {
                        el: '.swiper-pagination',
                        clickable: true,
                    },
                });
            }else{
                $(".mask").show();
                $(".content").html(data.msg)
            }
            
            // 获取产品详情
            $.ajax({
                type: "GET",
                url: protocol + '://' + host +"/product/brands/" + data.brand_id,
                dataType: 'json',
                async: false,
                success: function (data) {
                    videoData2 = data
                    if(!data.code) {
                        if(data.video_banner != "") {
                            $(".videoBgs2").append(render_video2(data));
                        }else{
                            $(".videoBgsTwo").hide();
                        }
                        $(".dind2").append(renderDetails2(data));
                        
                        console.log(data)
                    }else{
                        $(".mask").show();
                        $(".content").html(data.msg)
                    }
                   
                },
                error: function(error) {
                    $(".mask").show();
                    $(".content").html("加载失败")
                    console.log(error)
                }
            });
        },
        error: function(error) {
            $(".mask").show();
            $(".content").html("加载失败")
            console.log(error)
        }
    });
    // 渲染视频
    
    

</script>

</html>
